<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书本列表</title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" name="search" placeholder="请输入书名" />
			<button type="button" id="btn_search">搜索</button><!-- 最简单 -->
			<button type="button" id="btn_add">添加</button>
			<button type="button" id="btn_del">批量删除</button>
			<button type="button" id="btn_download">下载选中的数据</button>
			<button type="button" id="btn_rowEdit" hidden="">退出行编辑机模式</button>
		</div>
		<table border="1" width="600px">
			<thead>
				<th><input type="checkbox" name="cb_select_all" /></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>操作</th>
			</thead>
			<tbody>

			</tbody>
		</table>
		<script type="text/javascript">
			let books = [
				{id: 1,name: '三国演义',tdate: '1899-08-09',price: '60.00',count: 1,account: "hh"},
				{id: 2,name: '水浒传',tdate: '1863-09-10',price: '69.00',count: 1,account: "haha"},
				{id: 3,name: '红楼梦',tdate: '1884-03-12',price: '99.00',count: 1,account: "aa"},
				{id: 4,name: '西游记',tdate: '1900-07-28',price: '9.00',count: 1,account: "aa"},
				{id: 5,name: 'Java基础',tdate: '1908-07-28',price: '5.00',count: 1,account: "aa"}
			];
			let data = JSON.parse(localStorage.getItem("data"));
			if (!data) {
				data = books;
				localStorage.setItem("data", JSON.stringify(data));
			}

			//模拟登录成功
			sessionStorage.setItem("account", "aa");
			let $tbody = $("table").find("tbody");

			/**
			 * init初始化函数
			 */
			function init() {
				//绑定事件
				$("#btn_search").click(search);
				$("#btn_add").click(toAdd);
				$("#btn_delSelected").click(delSelected);
				$("input[name='cb_select_all']").change(selectAll);
				$tbody.find("tr").dblclick(rowEdit); //双击事件
				$("#btn_rowEdit").click(save);
			}
			let editTr = null;

			function save() {
				if (!editTr) {
					return;
				}

				editTr.children().each(function(index, item) {

				});
			}

			function rowEdit() {
				$("#btn_rowEdit").show();
				editTr = $(this);
				//$(this)：表示的是tr
				$(this).children().each(function(index, item) {
					if (this.title !== "noedit") {
						//将td中内容获取保存
						let td = $(this);
						//此时使用$(this)，表示td
						let text = $(this).text();
						//将td中的内容清空
						$(this).text("");
						console.log(text);
						//在td里面插入一个input
						// $(this).html("<input type='text'>");//不推荐
						let input = document.createElement("input");
						input.type = "text";
						input.value = text;
						let widthValue = 10 * text.length;
						input.style = "width: " + widthValue + "px";
						//添加到td中
						$(this).append(input);
						//input绑定失去焦点事件
						input.onblur = function() {
							console.log("失去焦点");
							//当input失去焦点时，将input中的内容保存到变量
							// console.log(this);
							let value = input.value;
							//删除input标签
							$(input).remove();
							//将input的内容显示在td中
							td.text(value);
						}
					}
				});
			}

			function selectAll() {
				$("input[name='cb_select']").prop("checked", $(this).prop("checked"));
			}

			function delSelected() {
				//获取所有选中name为cb_select的checkbox
				$("input[name='cb_select']:checked").each(function(index, item) {
					// data.splice($(item).val(), 1);
					for (let i in data) {
						let dataItem = data[i];
						if (parseInt($(item).val()) === dataItem.id) {
							data.splice(i, 1)
						}
					}
				});
				$tbody.empty();
				update();
				localStorage.setItem("data", JSON.stringify(data));
			}

			function toEdit(index) {
				let item = data[index];
				sessionStorage.setItem("index", index);
				sessionStorage.setItem("item", JSON.stringify(item));
				location.href = "add.html";
			}

			function toAdd() {
				// sessionStorage.setItem("index", null);
				// sessionStorage.setItem("item", null);
				sessionStorage.removeItem("index");
				sessionStorage.removeItem("item");
				location.href = "add.html";
			}

			function del(index) {
				data.splice(index, 1);
				localStorage.setItem("data", JSON.stringify(data));
				$tbody.empty();
				update();
			}

			function search() {
				console.log("search");
				let search = $("input[name='search']").val();
				$tbody.empty();
				update(search);
			}

			function update(bookName) {
				// console.log(data);
				//不需要使用break或continue等操作，可以使用$.each
				for (let index in data) {
					let item = data[index];
					// console.log(item);
					//console.log(sessionStorage.getItem("loginAccount"))
					if (sessionStorage.getItem("account") !== item.account) {
						continue;
					}
					if (bookName && item.name.toLowerCase().indexOf(bookName.toLowerCase()) === -1) {
						continue;
					}
					let tr =
						`
									<tr>
										<td title="noedit"><input type="checkbox" name="cb_select" value="${item.id}" /></td>
										<td>${item.id}</td>
										<td>${item.name}</td>
										<td>${item.price}</td>
										<td>${item.tdate}</td>
										<td>${item.count}</td>
										<td title="noedit">
											<button type="button" onclick="toEdit(${index})">编辑</button>
											<button type="button" onclick="del(${index})">删除</button>
										</td>
									</tr>
								`;
					$tbody.append(tr);
				}
			}
			update();
			init();
		</script>
	</body>
</html>
